<template>
  <div class="home">
    <div class="content">
      <!-- 头部 -->
      <div class="header">
        <div class="text">外卖</div>
        <div class="location">
          <van-icon name="location" />
          <span>大杨村201室</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <!-- 主要内容 -->
      <div class="main">
        <div class="main_bg">
          <div class="search">
            <input type="text" />
            <div class="search_text">搜索</div>
          </div>
          <div class="classify">
            <div class="big_classify">
              <div v-for="(i, index) in big_classify" :key="index">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="`#${i.icon}`"></use>
                </svg>
                {{ i.name }}
              </div>
            </div>
            <div class="small_classify">
              <div v-for="(i, index) in small_classify" :key="index">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="`#${i.icon}`"></use>
                </svg>
                {{ i.name }}
              </div>
            </div>
          </div>
        </div>
        <van-tabs class="van-tabs">
          <van-tab
            v-for="(i, index) in centent_nav_list"
            :title="i.tab"
            :key="index"
          >
            <Store :store_list="i.data" />
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Footer from "../../components/Footer.vue";
import Store from "./components/Store.vue";

export default {
  data() {
    return {
      big_classify: [
        { name: "外卖", icon: "icon-waimai1" },
        { name: "蔬菜水果", icon: "icon-shuiguo1" },
        { name: "超市便利", icon: "icon-sekuaichaoshi" },
        { name: "品质百货", icon: "icon-baihuochaoshi1" },
        { name: "买药", icon: "icon-yaodian" },
      ],
      small_classify: [
        { name: "美食", icon: "icon-chifan" },
        { name: "酒店民宿", icon: "icon-jiudian1" },
        { name: "休闲玩乐", icon: "icon-ziyuan" },
        { name: "打车", icon: "icon-dache1" },
        { name: "电影演出", icon: "icon-dianying" },
        { name: "美团优选", icon: "icon-meituan" },
        { name: "骑车", icon: "icon-zihangche1" },
        { name: "KTV", icon: "icon-KTV" },
        { name: "丽人美发", icon: "icon-meirongmeifa" },
        { name: "全部分类", icon: "icon-classquanbufenlei" },
      ],
      centent_nav_list: [
        {
          tab: "天天神券",
          data: [
            {
              pic: "https://p1.meituan.net/xianfu/ec58e028ff23c3746d81c5b5dfe4f7f5359216.jpg@380w_214h_1e_1c",
              title: "这是一家美食店1",
              sales: "200",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://p1.meituan.net/xianfu/ec58e028ff23c3746d81c5b5dfe4f7f5359216.jpg@380w_214h_1e_1c",
              title: "这是一家美食店2",
              sales: "300",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://p1.meituan.net/xianfu/ec58e028ff23c3746d81c5b5dfe4f7f5359216.jpg@380w_214h_1e_1c",
              title: "这是一家美食店3",
              sales: "66",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://p1.meituan.net/xianfu/ec58e028ff23c3746d81c5b5dfe4f7f5359216.jpg@380w_214h_1e_1c",
              title: "这是一家美食店4",
              sales: "88",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "减配送费",
          data: [
            {
              pic: "https://p1.meituan.net/xianfu/ec58e028ff23c3746d81c5b5dfe4f7f5359216.jpg@380w_214h_1e_1c",
              title: "这是一家美食店2",
              sales: "300",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "点评高分",
          data: [
            {
              pic: "https://p1.meituan.net/xianfu/ec58e028ff23c3746d81c5b5dfe4f7f5359216.jpg@380w_214h_1e_1c",
              title: "这是一家美食店1",
              sales: "200",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://p1.meituan.net/xianfu/ec58e028ff23c3746d81c5b5dfe4f7f5359216.jpg@380w_214h_1e_1c",
              title: "这是一家美食店2",
              sales: "300",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "会员满减",
          data: [
            {
              pic: "https://p1.meituan.net/xianfu/ec58e028ff23c3746d81c5b5dfe4f7f5359216.jpg@380w_214h_1e_1c",
              title: "这是一家美食店3",
              sales: "66",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://p1.meituan.net/xianfu/ec58e028ff23c3746d81c5b5dfe4f7f5359216.jpg@380w_214h_1e_1c",
              title: "这是一家美食店4",
              sales: "88",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
      ],
    };
  },
  components: {
    Footer,
    Store
  },
};
</script>

<style lang='less' scoped>
/deep/ .van-tabs__wrap {
  border-radius: 10px;
}
.home {
  display: flex;
  flex-flow: column;
  height: 100%;
  font-size: 12px;
  .content {
    flex: 1;
    overflow-y: auto;

    .main {
      margin-top: -30px;
      .van-tabs {
        padding: 0 20px 10px;
      }
      .main_bg {
        background-image: linear-gradient(#fff, #f5f5f5);
        padding: 10px 20px 0 20px;
        border-radius: 30px 30px 0 0;
        position: relative;
        .classify {
          padding: 20px 0;
          .small_classify {
            display: flex;
            flex-wrap: wrap;
            margin-top: 20px;
            div {
              display: flex;
              justify-content: center;
              flex-flow: column;
              align-items: center;
              width: 20%;
            }
            .icon {
              width: 30px;
              height: 30px;
              margin: 10px;
            }
          }
          .big_classify {
            display: flex;
            div {
              flex: 1;
              display: flex;
              justify-content: center;
              flex-flow: column;
              align-items: center;
              .icon {
                width: 50px;
                height: 50px;
                margin-bottom: 5px;
              }
            }
          }
        }

        .search {
          position: relative;
          .search_text {
            position: absolute;
            background-color: #ffc400;
            right: -6px;
            top: 1px;
            width: 50px;
            height: 32px;
            border-radius: 16px;
            text-align: center;
            line-height: 32px;
            font-size: 14px;
          }
          input {
            width: 100%;
            border: 1px solid #ffc400;
            border-radius: 20px;
            height: 30px;
          }
        }
      }
    }

    .header {
      background-image: linear-gradient(#ffc400, #fff);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 20px 40px 20px;
      .text {
        font-size: 20px;
        font-weight: 600;
      }
      .location {
        span {
          margin: 0 5px;
        }
        font-size: 14px;
      }
    }
  }
}
</style>

